<template>
	<div class="layout-pd">
		<zh-space>
			<zh-card title="">
				<zh-form ref="loginQueryForm" :model="state.queryParam">
					<zh-form-input prop="userName" label="用户名" placeholder="精确查询" v-model="state.queryParam.userName"></zh-form-input>
					<zh-form-input prop="fullName" label="姓名" placeholder="支持模糊查询" v-model="state.queryParam.fullName"></zh-form-input>
					<template v-if="state.advanced">
						<zh-form-select
							prop="loginFlag"
							label="成功标志"
							placeholder="请选择"
							:options="state.loginFlagDict"
							v-model="state.queryParam.loginFlag"
						></zh-form-select>
						<zh-form-input prop="ym" label="登入年月" placeholder="年月格式如：201901" v-model="state.queryParam.ym"></zh-form-input>
						<zh-form-date
							prop="loginTimeBeg"
							label="登入开始时间"
							placeholder="请输入开始时间"
							type="datetime"
							v-model="state.queryParam.loginTimeBeg"
						></zh-form-date>
						<zh-form-date
							prop="loginTimeEnd"
							label="登入结束时间"
							placeholder="请输入结束时间"
							type="datetime"
							v-model="state.queryParam.loginTimeEnd"
						></zh-form-date>
						<zh-form-select
							prop="loginType"
							label="登录类型"
							placeholder="请选择"
							:options="state.dictData.loginType"
							v-model="state.queryParam.loginType"
						></zh-form-select>
						<zh-form-select
							prop="equipmentType"
							label="设备类型"
							placeholder="请选择"
							:options="state.dictData.equipmentType"
							v-model="state.queryParam.equipmentType"
						></zh-form-select>
					</template>
					<zh-form-query v-model="state.advanced" :form-ref="loginQueryForm" :table-ref="loginListTable"> </zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table
				ref="loginListTable"
				title=""
				funcCode="loginLog0001"
				:columns="state.tableColumn"
				:disabled="false"
				highlight-current-row
			>
				<template #onlineFlag_default="{ row }">
					<zh-badge :status="flagMap[row.onlineFlag].status" :text="flagMap[row.onlineFlag].text" />
				</template>
				<template #loginFlag_default="{ row }">
					<zh-badge :status="statusMap[row.loginFlag].status" :text="statusMap[row.loginFlag].text" />
				</template>
			</zh-table>
		</zh-space>
	</div>
</template>

<script lang="ts" setup name="UserLoginLog">
//------------------定义子组件---------------------------
const loginQueryForm = ref<any>({});
const loginListTable = ref<any>({});

//------------------内部变量定义-------------------------
const statusMap = {
	0: {
		status: 'error',
		text: '失败',
	},
	1: {
		status: 'success',
		text: '成功',
	},
};
const flagMap = {
	0: {
		status: 'default',
		text: '下线',
	},
	1: {
		status: 'processing',
		text: '在线',
	},
};
const state = reactive({
	description: '用户登入日志',
	dictData: {} as any,
	form: null,
	// 高级搜索 展开/关闭
	advanced: false,
	// 查询参数
	queryParam: {} as any,
	loginFlagDict: [
		{
			dictKey: '1',
			dictValue: '成功',
		},
		{
			dictKey: '0',
			dictValue: '失败',
		},
	],
	// 表头
	tableColumn: [
		{ type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'loginId', title: '登入Id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{ field: 'userId', title: '用户Id', visible: false, align: 'center', fixed: 'left', width: 150 },
		{ field: 'userName', title: '用户名', align: 'center', fixed: 'left', width: 150 },
		{ field: 'fullName', title: '姓名', align: 'center', fixed: 'left', width: 200 },
		{ field: 'ym', title: '所属年月', align: 'center', width: 80 },
		{
			field: 'onlineFlag',
			title: '在线标识',
			align: 'center',
			width: 80,
			slots: {
				default: 'onlineFlag_default',
			},
		},
		{
			field: 'loginFlag',
			title: '登入成功标识',
			align: 'center',
			width: 80,
			slots: {
				default: 'loginFlag_default',
			},
		},
		{ field: 'failReason', title: '失败原因', align: 'center', width: 300 },
		{ field: 'accessToken', title: '登入TOKEN', align: 'center', width: 250 },
		{ field: 'loginTime', title: '登入时间', align: 'center', width: 200 },
		{ field: 'logoutTime', title: '退出时间', align: 'center', width: 200 },
		{ field: 'loginIp', title: '登入IP', align: 'center', width: 150 },
		{ field: 'loginHost', title: '登入host', align: 'center', width: 150 },
		{ field: 'loginKey', title: '登入KEY', align: 'center', width: 250 },
		{ field: 'loginType', title: '登入类型', visible: false, align: 'center', width: 100 },
		{ field: 'loginTypeName', title: '登入类型', align: 'center', width: 250 },
		{ field: 'equipmentType', title: '登入设备类型', visible: false, align: 'center', width: 100 },
		{ field: 'equipmentTypeName', title: '登入设备类型', align: 'center', width: 250 },
		{ field: 'openId', title: '第三方登入ID', align: 'center', width: 200 },
		{ field: 'equipmentId', title: '登入设备ID', align: 'center', width: 200 },
		{ field: 'browser', title: '浏览器类型', align: 'center', width: 150 },
	],
});

//------------------初始化------------------------------
// 数据字典初始化
const params = {
	dictFields: 'equipmentType,loginType',
};
$api.common.getBatchDict.post(params).then((res) => {
	state.dictData = res.result;
});

</script>
